import React from 'react';

/**
 * 组件挂载阶段，要执行的钩子函数
 * 1 constructor
 * 2 render
 * 3 componentDidMount
 */
export class App extends React.Component {
  constructor() {
    console.log('1. constructor()');
    super();
    // 初始化state
    this.state = {
      count: 0,
    };
    // 为事件处理程序绑定this
    // 为组件实例绑定ref
    this.h1Ref = React.createRef();
  }

  render() {
    console.log('2. render');
    // h1是拿不到的
    // const h1 = document.getElementById('h1-001');
    // console.log(h1);
    // ref也是拿不到的
    // console.log('ref', this.h1Ref);
    return (
      <div>
        <h1 id="h1-001" ref={this.h1Ref}>
          我是H1标签
        </h1>
        <button>点击次数{this.state.count}</button>
      </div>
    );
  }

  componentDidMount() {
    console.log('3. componentDidMount()');
    // 发送网络请求
    // ajax(http://api.....)
    // DOM操作,此时才能拿到DOM元素
    const h1 = document.getElementById('h1-001');
    console.log('didmount', h1);
    console.log('ref', this.h1Ref);
  }
}

export default App;
